import React from "react"
import { Card, Button } from "antd"
import ReactECharts from "echarts-for-react"
const { useState } = React

export default function Bar() {
  const [load, setLoad] = useState(true)
  const getOption = () => {
    return {
      title: {
        text: "ECharts 饼图",
      },
      series: [
        {
          type: "pie",
          data: [
            { value: 1048, name: "苹果" },
            { value: 735, name: "香蕉" },
            { value: 580, name: "西瓜" },
            { value: 484, name: "葡萄" },
            { value: 300, name: "柚子" },
          ],
          // 半径配置
          // radius:'80%' // 宽高较小的一半来进行百分比
          // radius:['50%','75%'] // 圆环
          // roseType: 'radius', //南丁格尔图 每个区域半径不一样
          selectedMode: "single", //点击选中的部分会脱离 multiple 可以多选
          selectedOffset: 30, // 偏移距离
        },
      ],
    }
  }
  return (
    <>
      <Card>
        <Button
          type="primary"
          onClick={() => {
            setLoad(!load)
            setTimeout(() => {
              setLoad(true)
            }, 200)
          }}
        >
          更新
        </Button>
      </Card>
      <Card title="饼图">
        {load ? <ReactECharts option={getOption()} /> : null}
      </Card>
    </>
  )
}
